import React from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import { Button } from '@ant-design/react-native';
import { navigate } from '@/utils/navigation';

export default function Home() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <View style={styles.tabs}>
          <Text style={[styles.tabText, styles.activeTab]}>关注s</Text>
          <Text style={styles.tabText}>发现</Text>
          <Text style={styles.tabText}>附近</Text>
        </View>
        <View style={styles.headerIcons}>
          <View style={styles.iconPlaceholder} />
          <View style={styles.iconPlaceholder} />
        </View>
      </View>
      <Button type="primary" onPress={()=> {
        navigate('/loan/ocr')
      }}>去借款</Button>

      <ScrollView style={styles.content}>
        <View style={styles.categories}>
          <Text style={styles.categoryText}>推荐</Text>
          <Text style={styles.categoryText}>视频</Text>
          <Text style={styles.categoryText}>直播</Text>
          <Text style={styles.categoryText}>摄影</Text>
          <Text style={styles.categoryText}>游戏</Text>
          <Text style={styles.categoryText}>壁纸</Text>
        </View>

        <View style={styles.grid}>
          {[1, 2, 3, 4].map(item => (
            <View key={item} style={styles.gridItem}>
              <View style={styles.imagePlaceholder} />
              <Text style={styles.itemTitle}>设计作品标题</Text>
              <View style={styles.itemFooter}>
                <View style={styles.avatarSmall} />
                <Text style={styles.authorName}>作者名称</Text>
                <Text style={styles.likes}>1.2k</Text>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    paddingHorizontal: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 50,
  },
  tabs: {
    flexDirection: 'row',
  },
  tabText: {
    fontSize: 16,
    marginRight: 20,
    color: '#666',
  },
  activeTab: {
    color: '#000',
    fontWeight: 'bold',
  },
  headerIcons: {
    flexDirection: 'row',
  },
  iconPlaceholder: {
    width: 24,
    height: 24,
    backgroundColor: '#eee',
    marginLeft: 15,
    borderRadius: 12,
  },
  content: {
    flex: 1,
  },
  categories: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  categoryText: {
    marginRight: 20,
    fontSize: 14,
    color: '#666',
  },
  grid: {
    padding: 8,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  gridItem: {
    width: '50%',
    padding: 8,
  },
  imagePlaceholder: {
    width: '100%',
    height: 150,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    marginBottom: 8,
  },
  itemTitle: {
    fontSize: 14,
    marginBottom: 4,
  },
  itemFooter: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatarSmall: {
    width: 20,
    height: 20,
    backgroundColor: '#eee',
    borderRadius: 10,
    marginRight: 6,
  },
  authorName: {
    fontSize: 12,
    color: '#666',
    flex: 1,
  },
  likes: {
    fontSize: 12,
    color: '#999',
  },
});
